<!--

=========================================================
* Pixel Pro Bootstrap 4 UI Kit
=========================================================

* Product Page: https://themesberg.com/product/ui-kits/pixel-pro-premium-bootstrap-4-ui-kit
* Copyright 2019 Themesberg (https://www.themesberg.com)

* Coded by https://themesberg.com

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

-->
<!DOCTYPE html>
<html lang="en">

<head>
    @@include('./_head.html', {
        "path": "../..",
        "title": "Pixel Documentation - Widgets"
    })
</head>
<body>
    <a href="#doc-index" class="btn btn-lg btn-primary btn-block rounded-0 d-lg-none" data-toggle="collapse" data-target="#doc-index" aria-expanded="false" aria-controls="doc-index">
        <svg class="icon fill-white" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3 17C3 17.5523 3.44772 18 4 18H20C20.5523 18 21 17.5523 21 17V17C21 16.4477 20.5523 16 20 16H4C3.44772 16 3 16.4477 3 17V17ZM3 12C3 12.5523 3.44772 13 4 13H20C20.5523 13 21 12.5523 21 12V12C21 11.4477 20.5523 11 20 11H4C3.44772 11 3 11.4477 3 12V12ZM4 6C3.44772 6 3 6.44772 3 7V7C3 7.55228 3.44772 8 4 8H20C20.5523 8 21 7.55228 21 7V7C21 6.44772 20.5523 6 20 6H4Z" />
        </svg>
        <span class="h6 text-white">Menu</span>
    </a>
    <section class="container-fluid py-4">
        <div class="row">
            @@include('./_docs-sidebar.html', {
                "path": "../..",
                "docs-path": ".."
            })
            <!-- Content -->
            <div class="col-12 col-lg-10">
                <div class="row">
                    <div class="col-xl-10 col-lg-9 px-xl-5 px-lg-3 px-md-2 py-md-4">
                        <div class="border-bottom">
                            <h1>Widgets</h1>
                            <p class="lead text-dark">Use Pixel's custom widgets to provide useful information in sidebars, footers or other parts of the website.</p>
                        </div>
                        <div id="top-stories" class="my-5">
                            <h5 class="mb-3">Blog card for related/top stories</h5>
                            <p>Use the following blog card for related or top stories in sidebars or footer. You can use Bootstrap's layout classes (eg. <code class="text-danger">.row</code> and <code class="text-danger">.col-x</code>) to increase or decrease
                                the size.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-1" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-1" data-toggle="tab" href="#tab-content-1" role="tab" aria-controls="tab-link-1" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-2" data-toggle="tab" href="#tab-content-2" role="tab" aria-controls="tab-link-2" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent1">
                                            <div class="tab-pane fade show active" id="tab-content-1" role="tabpanel" aria-labelledby="tab-content-1">
                                                <div class="blog-card">
                                                    <div class="row">
                                                        <div class="col-12 col-lg-3">
                                                            <div class="card border-0">
                                                                <img src="../../../../assets/img/blog/image-2.jpg" class="card-img-top" alt="image">
                                                                <div class="card-body px-0">
                                                                    <small class="d-block mb-2">January 20, 2019</small>
                                                                    <h2 class="h5">
                                                                        <a href="#">Remote workers</a>
                                                                    </h2>
                                                                    <p class="card-text my-2">According to some historical records, some people ...</p>
                                                                </div>
                                                                <div class="card-footer px-0 pt-0">
                                                                    <a class="btn btn-sm btn-block btn-secondary" href="#">
                                                                        <span class="fas fa-book-open"></span> Learn more
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-2" role="tabpanel" aria-labelledby="tab-content-2">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;div class=&#x22;row&#x22;&#x3E;
    &#x3C;div class=&#x22;col-3&#x22;&#x3E;
        &#x3C;div class=&#x22;card border-0&#x22;&#x3E;
            &#x3C;img src=&#x22;../../../../assets/img/blog/image-2.jpg&#x22; class=&#x22;card-img-top&#x22; alt=&#x22;image&#x22;&#x3E;
            &#x3C;div class=&#x22;card-body px-0&#x22;&#x3E;
                &#x3C;small class=&#x22;d-block mb-2&#x22;&#x3E;January 20, 2019&#x3C;/small&#x3E;
                &#x3C;h2 class=&#x22;h5&#x22;&#x3E;
                    &#x3C;a href=&#x22;#&#x22;&#x3E;Remote workers&#x3C;/a&#x3E;
                &#x3C;/h2&#x3E;
                &#x3C;p class=&#x22;card-text my-2&#x22;&#x3E;According to some historical records, some people ...&#x3C;/p&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;card-footer px-0 pt-0&#x22;&#x3E;
                &#x3C;a class=&#x22;btn btn-sm btn-block btn-secondary&#x22; href=&#x22;#&#x22;&#x3E;
                    &#x3C;span class=&#x22;fas fa-book-open&#x22;&#x3E;&#x3C;/span&#x3E;
                    Learn more
                &#x3C;/a&#x3E;
            &#x3C;/div&#x3E;
        &#x3C;/div&#x3E;
    &#x3C;/div&#x3E;
&#x3C;/div&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="recent-news" class="my-5">
                            <h5 class="mb-3">Recent news</h5>
                            <p>Use this widget to show your most recent or related news in a sidebar, footer or below your blog post.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-2" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-3" data-toggle="tab" href="#tab-content-3" role="tab" aria-controls="tab-link-3" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-4" data-toggle="tab" href="#tab-content-4" role="tab" aria-controls="tab-link-4" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent2">
                                            <div class="tab-pane fade show active" id="tab-content-3" role="tabpanel" aria-labelledby="tab-content-3">
                                                <div class="row">
                                                    <div class="col-12 col-lg-4">
                                                        <ul class="list-unstyled news-list">
                                                            <li class="row mx-0 mb-4">
                                                                <a href="#" class="col-3">
                                                                    <img src="./assets/img/blog/image-1.jpg" alt="Image" class="rounded">
                                                                </a>
                                                                <div class="col">
                                                                    <a href="#">
                                                                        <h6 class="mb-1">Experience the sound of a modern and clean.</h6>
                                                                    </a>
                                                                    <div class="post-meta font-small">
                                                                        <a class="text-secondary" href="#"><i class="far fa-comments mr-2"></i>50</a>
                                                                        <span><i class="far fa-clock mr-2"></i>Apr 03,
                                                                            2019</span>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                            <li class="row mx-0 mb-4">
                                                                <a href="#" class="col-3">
                                                                    <img src="./assets/img/blog/image-2.jpg" alt="Image" class="rounded">
                                                                </a>
                                                                <div class="col">
                                                                    <a href="#">
                                                                        <h6 class="mb-1">Experience the sound of a modern and clean.</h6>
                                                                    </a>
                                                                    <div class="post-meta font-small">
                                                                        <a class="text-secondary" href="#"><i class="far fa-comments mr-2"></i>26</a>
                                                                        <span><i class="far fa-clock mr-2"></i>Apr 10,
                                                                            2019</span>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                            <li class="row mx-0 mb-4">
                                                                <a href="#" class="col-3">
                                                                    <img src="./assets/img/blog/image-3.jpg" alt="Image" class="rounded">
                                                                </a>
                                                                <div class="col">
                                                                    <a href="#">
                                                                        <h6 class="mb-1">Experience the sound of a modern and clean.</h6>
                                                                    </a>
                                                                    <div class="post-meta font-small">
                                                                        <a class="text-secondary" href="#"><i class="far fa-comments mr-2"></i>12</a>
                                                                        <span><i class="far fa-clock mr-2"></i>Apr 16,
                                                                            2019</span>
                                                                    </div>
                                                                </div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-4" role="tabpanel" aria-labelledby="tab-content-4">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;div class=&#x22;row&#x22;&#x3E;
    &#x3C;div class=&#x22;col-4&#x22;&#x3E;
        &#x3C;ul class=&#x22;list-unstyled news-list&#x22;&#x3E;
            &#x3C;li class=&#x22;row mx-0 mb-4&#x22;&#x3E;
                &#x3C;a href=&#x22;#&#x22; class=&#x22;col-3&#x22;&#x3E;
                    &#x3C;img src=&#x22;/img/blog/image-1.jpg&#x22; alt=&#x22;Image&#x22; class=&#x22;rounded&#x22;&#x3E;
                &#x3C;/a&#x3E;
                &#x3C;div class=&#x22;col&#x22;&#x3E;
                    &#x3C;a href=&#x22;#&#x22;&#x3E;
                        &#x3C;h6 class=&#x22;mb-1&#x22;&#x3E;Experience the sound of a modern and clean.&#x3C;/h6&#x3E;
                    &#x3C;/a&#x3E;
                    &#x3C;div class=&#x22;post-meta font-small&#x22;&#x3E;
                        &#x3C;a class=&#x22;text-secondary&#x22; href=&#x22;#&#x22;&#x3E;&#x3C;i class=&#x22;far fa-comments&#x22;&#x3E;&#x3C;/i&#x3E;50&#x3C;/a&#x3E;
                        &#x3C;span&#x3E;&#x3C;i class=&#x22;far fa-clock&#x22;&#x3E;&#x3C;/i&#x3E;Apr 03, 2019&#x3C;/span&#x3E;
                    &#x3C;/div&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/li&#x3E;
            &#x3C;li class=&#x22;row mx-0 mb-4&#x22;&#x3E;
                &#x3C;a href=&#x22;#&#x22; class=&#x22;col-3&#x22;&#x3E;
                    &#x3C;img src=&#x22;/img/blog/image-2.jpg&#x22; alt=&#x22;Image&#x22; class=&#x22;rounded&#x22;&#x3E;
                &#x3C;/a&#x3E;
                &#x3C;div class=&#x22;col&#x22;&#x3E;
                    &#x3C;a href=&#x22;#&#x22;&#x3E;
                        &#x3C;h6 class=&#x22;mb-1&#x22;&#x3E;Experience the sound of a modern and clean.&#x3C;/h6&#x3E;
                    &#x3C;/a&#x3E;
                    &#x3C;div class=&#x22;post-meta font-small&#x22;&#x3E;
                        &#x3C;a class=&#x22;text-secondary&#x22; href=&#x22;#&#x22;&#x3E;&#x3C;i class=&#x22;far fa-comments&#x22;&#x3E;&#x3C;/i&#x3E;26&#x3C;/a&#x3E;
                        &#x3C;span&#x3E;&#x3C;i class=&#x22;far fa-clock&#x22;&#x3E;&#x3C;/i&#x3E;Apr 10, 2019&#x3C;/span&#x3E;
                    &#x3C;/div&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/li&#x3E;
            &#x3C;li class=&#x22;row mx-0 mb-4&#x22;&#x3E;
                &#x3C;a href=&#x22;#&#x22; class=&#x22;col-3&#x22;&#x3E;
                    &#x3C;img src=&#x22;/img/blog/image-3.jpg&#x22; alt=&#x22;Image&#x22; class=&#x22;rounded&#x22;&#x3E;
                &#x3C;/a&#x3E;
                &#x3C;div class=&#x22;col&#x22;&#x3E;
                    &#x3C;a href=&#x22;#&#x22;&#x3E;
                        &#x3C;h6 class=&#x22;mb-1&#x22;&#x3E;Experience the sound of a modern and clean.&#x3C;/h6&#x3E;
                    &#x3C;/a&#x3E;
                    &#x3C;div class=&#x22;post-meta font-small&#x22;&#x3E;
                        &#x3C;a class=&#x22;text-secondary&#x22; href=&#x22;#&#x22;&#x3E;&#x3C;i class=&#x22;far fa-comments&#x22;&#x3E;&#x3C;/i&#x3E;12&#x3C;/a&#x3E;
                        &#x3C;span&#x3E;&#x3C;i class=&#x22;far fa-clock&#x22;&#x3E;&#x3C;/i&#x3E;Apr 16, 2019&#x3C;/span&#x3E;
                    &#x3C;/div&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/li&#x3E;
        &#x3C;/ul&#x3E;
    &#x3C;/div&#x3E;
&#x3C;/div&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="featured-news" class="my-5">
                            <h5 class="mb-3">Featured news</h5>
                            <p>You can use this blog card format as a widget to show featured news in a sidebar or footer.
                            </p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-3" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-5" data-toggle="tab" href="#tab-content-5" role="tab" aria-controls="tab-link-5" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-6" data-toggle="tab" href="#tab-content-6" role="tab" aria-controls="tab-link-6" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent3">
                                            <div class="tab-pane fade show active" id="tab-content-5" role="tabpanel" aria-labelledby="tab-content-5">
                                                <div class="row">
                                                    <div class="col-12 col-lg-3">
                                                        <div class="news-carousel owl-carousel owl-theme">
                                                            <div class="item">
                                                                <div class="blog-card">
                                                                    <div class="card shadow-sm border-light">
                                                                        <div class="card-body border-bottom">
                                                                            <h2 class="h5">
                                                                                <a href="#">Remote workers</a>
                                                                            </h2>
                                                                            <p class="card-text my-2">According to some historical records, some people ...</p>
                                                                        </div>
                                                                        <div class="card-footer mx-4 px-0">
                                                                            <div class="post-meta"><a href="#"><i class="far fa-comments mr-2"></i>33</a><span><i
                                                                                        class="far fa-clock"></i>Jan
                                                                                    03, 2019</span></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="item">
                                                                <div class="blog-card">
                                                                    <div class="card shadow-sm border-light">
                                                                        <div class="card-body border-bottom">
                                                                            <h2 class="h5">
                                                                                <a href="#">Remote workers</a>
                                                                            </h2>
                                                                            <p class="card-text my-2">According to some historical records, some people ...</p>
                                                                        </div>
                                                                        <div class="card-footer mx-4 px-0">
                                                                            <div class="post-meta"><a href="#"><i class="far fa-comments mr-2"></i>33</a><span><i
                                                                                        class="far fa-clock"></i>Jan
                                                                                    03, 2019</span></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="item">
                                                                <div class="blog-card">
                                                                    <div class="card shadow-sm border-light">
                                                                        <div class="card-body border-bottom">
                                                                            <h2 class="h5">
                                                                                <a href="#">Remote workers</a>
                                                                            </h2>
                                                                            <p class="card-text my-2">According to some historical records, some people ...</p>
                                                                        </div>
                                                                        <div class="card-footer mx-4 px-0">
                                                                            <div class="post-meta"><a href="#"><i class="far fa-comments mr-2"></i>33</a><span><i
                                                                                        class="far fa-clock"></i>Jan
                                                                                    03, 2019</span></div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-6" role="tabpanel" aria-labelledby="tab-content-6">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;div class=&#x22;row&#x22;&#x3E;
    &#x3C;div class=&#x22;col-12 col-md-4&#x22;&#x3E;
        &#x3C;div class=&#x22;news-carousel owl-carousel owl-theme&#x22;&#x3E;
            &#x3C;div class=&#x22;item&#x22;&#x3E;               
                &#x3C;div class=&#x22;blog-card&#x22;&#x3E;
                    &#x3C;div class=&#x22;card shadow-sm border-light&#x22;&#x3E;
                        &#x3C;div class=&#x22;card-body border-bottom&#x22;&#x3E;
                            &#x3C;h2 class=&#x22;h5&#x22;&#x3E;
                                &#x3C;a href=&#x22;#&#x22;&#x3E;Remote workers&#x3C;/a&#x3E;
                            &#x3C;/h2&#x3E;
                            &#x3C;p class=&#x22;card-text my-2&#x22;&#x3E;According to some historical records, some people ...&#x3C;/p&#x3E;
                        &#x3C;/div&#x3E;
                        &#x3C;div class=&#x22;card-footer mx-4 px-0&#x22;&#x3E;
                            &#x3C;div class=&#x22;post-meta&#x22;&#x3E;&#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;i class=&#x22;far fa-comments&#x22;&#x3E;&#x3C;/i&#x3E;33&#x3C;/a&#x3E;&#x3C;span&#x3E;&#x3C;i class=&#x22;far fa-clock&#x22;&#x3E;&#x3C;/i&#x3E;Jan 03, 2019&#x3C;/span&#x3E;&#x3C;/div&#x3E;
                        &#x3C;/div&#x3E;
                    &#x3C;/div&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;          
            &#x3C;div class=&#x22;item&#x22;&#x3E;               
                &#x3C;div class=&#x22;blog-card&#x22;&#x3E;
                    &#x3C;div class=&#x22;card shadow-sm border-light&#x22;&#x3E;
                        &#x3C;div class=&#x22;card-body border-bottom&#x22;&#x3E;
                            &#x3C;h2 class=&#x22;h5&#x22;&#x3E;
                                &#x3C;a href=&#x22;#&#x22;&#x3E;Remote workers&#x3C;/a&#x3E;
                            &#x3C;/h2&#x3E;
                            &#x3C;p class=&#x22;card-text my-2&#x22;&#x3E;According to some historical records, some people ...&#x3C;/p&#x3E;
                        &#x3C;/div&#x3E;
                        &#x3C;div class=&#x22;card-footer mx-4 px-0&#x22;&#x3E;
                            &#x3C;div class=&#x22;post-meta&#x22;&#x3E;&#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;i class=&#x22;far fa-comments&#x22;&#x3E;&#x3C;/i&#x3E;33&#x3C;/a&#x3E;&#x3C;span&#x3E;&#x3C;i class=&#x22;far fa-clock&#x22;&#x3E;&#x3C;/i&#x3E;Jan 03, 2019&#x3C;/span&#x3E;&#x3C;/div&#x3E;
                        &#x3C;/div&#x3E;
                    &#x3C;/div&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;
            &#x3C;div class=&#x22;item&#x22;&#x3E;               
                &#x3C;div class=&#x22;blog-card&#x22;&#x3E;
                    &#x3C;div class=&#x22;card shadow-sm border-light&#x22;&#x3E;
                        &#x3C;div class=&#x22;card-body border-bottom&#x22;&#x3E;
                            &#x3C;h2 class=&#x22;h5&#x22;&#x3E;
                                &#x3C;a href=&#x22;#&#x22;&#x3E;Remote workers&#x3C;/a&#x3E;
                            &#x3C;/h2&#x3E;
                            &#x3C;p class=&#x22;card-text my-2&#x22;&#x3E;According to some historical records, some people ...&#x3C;/p&#x3E;
                        &#x3C;/div&#x3E;
                        &#x3C;div class=&#x22;card-footer mx-4 px-0&#x22;&#x3E;
                            &#x3C;div class=&#x22;post-meta&#x22;&#x3E;&#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;i class=&#x22;far fa-comments&#x22;&#x3E;&#x3C;/i&#x3E;33&#x3C;/a&#x3E;&#x3C;span&#x3E;&#x3C;i class=&#x22;far fa-clock&#x22;&#x3E;&#x3C;/i&#x3E;Jan 03, 2019&#x3C;/span&#x3E;&#x3C;/div&#x3E;
                        &#x3C;/div&#x3E;
                    &#x3C;/div&#x3E;
                &#x3C;/div&#x3E;
            &#x3C;/div&#x3E;  
        &#x3C;/div&#x3E;
    &#x3C;/div&#x3E;
&#x3C;/div&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="recent-actions" class="my-5">
                            <h5 class="mb-3">Recent actions by users</h5>
                            <p>Use this widget to showcase the actions made by users (eg. creating new posts, liking an item).
                            </p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-4" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-7" data-toggle="tab" href="#tab-content-7" role="tab" aria-controls="tab-link-7" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-8" data-toggle="tab" href="#tab-content-8" role="tab" aria-controls="tab-link-8" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent4">
                                            <div class="tab-pane fade show active" id="tab-content-7" role="tabpanel" aria-labelledby="tab-content-7">
                                                <div class="row">
                                                    <div class="col-12 col-lg-4">
                                                        <ul class="list-group list-group-flush bg-white shadow-sm border border-light">
                                                            <li class="list-group-item"><span class="font-weight-bold">Robert
                                                                    T</span> on <a href="#">Logos and responsive design</a></li>
                                                            <li class="list-group-item"><span class="font-weight-bold">Zoltan
                                                                    Z</span> on <a href="#">Best java frameworks</a></li>
                                                            <li class="list-group-item"><span class="font-weight-bold">Oana
                                                                    C</span> on <a href="#">Bootstrap 4 framework</a></li>
                                                            <li class="list-group-item"><span class="font-weight-bold">George
                                                                    G</span> on <a href="#">Top 2019 upcoming games</a></li>
                                                            <li class="list-group-item"><span class="font-weight-bold">Calota
                                                                    A</span> on <a href="#">Angular and other tools</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-8" role="tabpanel" aria-labelledby="tab-content-8">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;div class=&#x22;col-12 col-lg-4&#x22;&#x3E;
    &#x3C;ul class=&#x22;list-group list-group-flush bg-white shadow-sm border border-light&#x22;&#x3E;
        &#x3C;li class=&#x22;list-group-item&#x22;&#x3E;&#x3C;span class=&#x22;font-weight-bold&#x22;&#x3E;Robert T&#x3C;/span&#x3E; on &#x3C;a href=&#x22;#&#x22;&#x3E;Logos and responsive design&#x3C;/a&#x3E;&#x3C;/li&#x3E;
        &#x3C;li class=&#x22;list-group-item&#x22;&#x3E;&#x3C;span class=&#x22;font-weight-bold&#x22;&#x3E;Zoltan Z&#x3C;/span&#x3E; on &#x3C;a href=&#x22;#&#x22;&#x3E;Best java frameworks&#x3C;/a&#x3E;&#x3C;/li&#x3E;
        &#x3C;li class=&#x22;list-group-item&#x22;&#x3E;&#x3C;span class=&#x22;font-weight-bold&#x22;&#x3E;Oana C&#x3C;/span&#x3E; on &#x3C;a href=&#x22;#&#x22;&#x3E;Bootstrap 4 framework&#x3C;/a&#x3E;&#x3C;/li&#x3E;
        &#x3C;li class=&#x22;list-group-item&#x22;&#x3E;&#x3C;span class=&#x22;font-weight-bold&#x22;&#x3E;George G&#x3C;/span&#x3E; on &#x3C;a href=&#x22;#&#x22;&#x3E;Top 2019 upcoming games&#x3C;/a&#x3E;&#x3C;/li&#x3E;
        &#x3C;li class=&#x22;list-group-item&#x22;&#x3E;&#x3C;span class=&#x22;font-weight-bold&#x22;&#x3E;Calota A&#x3C;/span&#x3E; on &#x3C;a href=&#x22;#&#x22;&#x3E;Angular and other tools&#x3C;/a&#x3E;&#x3C;/li&#x3E;
    &#x3C;/ul&#x3E;
&#x3C;/div&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="sidebar-menu" class="my-5">
                            <h5 class="mb-3">Sidebar menu</h5>
                            <p>You can use this as a sidebar menu or as a smaller menu item combined with other components. It has a <code class="text-danger">badge</code> indicating a count of something.
                            </p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-5" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-9" data-toggle="tab" href="#tab-content-9" role="tab" aria-controls="tab-link-9" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-10" data-toggle="tab" href="#tab-content-10" role="tab" aria-controls="tab-link-10" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent5">
                                            <div class="tab-pane fade show active" id="tab-content-9" role="tabpanel" aria-labelledby="tab-content-9">
                                                <div class="row">
                                                    <div class="col-12 col-lg-4">
                                                        <ul class="list-group list-group-flush bg-white shadow-sm border border-light">
                                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                                <a href="#">Messages</a>
                                                                <span class="badge badge-primary badge-pill">14</span>
                                                            </li>
                                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                                <a href="#">Activity</a>
                                                                <span class="badge badge-secondary badge-pill">2</span>
                                                            </li>
                                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                                <a href="#">Settings</a>
                                                                <span class="badge badge-tertiary badge-pill">1</span>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-10" role="tabpanel" aria-labelledby="tab-content-10">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;div class=&#x22;row&#x22;&#x3E;
    &#x3C;div class=&#x22;col-12 col-lg-4&#x22;&#x3E;
        &#x3C;ul class=&#x22;list-group list-group-flush bg-white shadow-sm border border-light&#x22;&#x3E;
            &#x3C;li class=&#x22;list-group-item d-flex justify-content-between align-items-center&#x22;&#x3E;
                &#x3C;a href=&#x22;#&#x22;&#x3E;Messages&#x3C;/a&#x3E;
                &#x3C;span class=&#x22;badge badge-primary badge-pill&#x22;&#x3E;14&#x3C;/span&#x3E;
            &#x3C;/li&#x3E;
            &#x3C;li class=&#x22;list-group-item d-flex justify-content-between align-items-center&#x22;&#x3E;
                &#x3C;a href=&#x22;#&#x22;&#x3E;Activity&#x3C;/a&#x3E;  
                &#x3C;span class=&#x22;badge badge-secondary badge-pill&#x22;&#x3E;2&#x3C;/span&#x3E;
            &#x3C;/li&#x3E;
            &#x3C;li class=&#x22;list-group-item d-flex justify-content-between align-items-center&#x22;&#x3E;
                &#x3C;a href=&#x22;#&#x22;&#x3E;Settings&#x3C;/a&#x3E;  
                &#x3C;span class=&#x22;badge badge-tertiary badge-pill&#x22;&#x3E;1&#x3C;/span&#x3E;
            &#x3C;/li&#x3E;
        &#x3C;/ul&#x3E;
    &#x3C;/div&#x3E;
&#x3C;/div&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="updates" class="my-5">
                            <h5 class="mb-3">Updates with list groups</h5>
                            <p>Use the list groups anywhere to indicate updates, comments or information.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-6" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-11" data-toggle="tab" href="#tab-content-11" role="tab" aria-controls="tab-link-11" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-12" data-toggle="tab" href="#tab-content-12" role="tab" aria-controls="tab-link-12" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent6">
                                            <div class="tab-pane fade show active" id="tab-content-11" role="tabpanel" aria-labelledby="tab-content-11">
                                                <div class="row">
                                                    <div class="col-12 col-lg-4">
                                                        <div class="list-group">
                                                            <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
                                                                <div class="d-flex w-100 justify-content-between">
                                                                    <h5 class="mb-1 text-white">List group item heading</h5>
                                                                    <small>7min</small>
                                                                </div>
                                                                <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                                                                </p>
                                                                <small>Donec id elit non mi porta.</small>
                                                            </a>
                                                            <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
                                                                <div class="d-flex w-100 justify-content-between">
                                                                    <h5 class="mb-1">List group item heading</h5>
                                                                    <small class="text-muted">3d</small>
                                                                </div>
                                                                <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                                                                </p>
                                                                <small class="text-muted">Donec id elit non mi porta.</small>
                                                            </a>
                                                            <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
                                                                <div class="d-flex w-100 justify-content-between">
                                                                    <h5 class="mb-1">List group item heading</h5>
                                                                    <small class="text-muted">10d</small>
                                                                </div>
                                                                <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                                                                </p>
                                                                <small class="text-muted">Donec id elit non mi porta.</small>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-12" role="tabpanel" aria-labelledby="tab-content-12">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;div class=&#x22;row&#x22;&#x3E;
    &#x3C;div class=&#x22;col-12 col-lg-4&#x22;&#x3E;
        &#x3C;div class=&#x22;list-group&#x22;&#x3E;
            &#x3C;a href=&#x22;#&#x22; class=&#x22;list-group-item list-group-item-action flex-column align-items-start active&#x22;&#x3E;
                &#x3C;div class=&#x22;d-flex w-100 justify-content-between&#x22;&#x3E;
                &#x3C;h5 class=&#x22;mb-1 text-white&#x22;&#x3E;List group item heading&#x3C;/h5&#x3E;
                &#x3C;small&#x3E;7min&#x3C;/small&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;p class=&#x22;mb-1&#x22;&#x3E;Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.&#x3C;/p&#x3E;
                &#x3C;small&#x3E;Donec id elit non mi porta.&#x3C;/small&#x3E;
            &#x3C;/a&#x3E;
            &#x3C;a href=&#x22;#&#x22; class=&#x22;list-group-item list-group-item-action flex-column align-items-start&#x22;&#x3E;
                &#x3C;div class=&#x22;d-flex w-100 justify-content-between&#x22;&#x3E;
                &#x3C;h5 class=&#x22;mb-1&#x22;&#x3E;List group item heading&#x3C;/h5&#x3E;
                &#x3C;small class=&#x22;text-muted&#x22;&#x3E;3d&#x3C;/small&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;p class=&#x22;mb-1&#x22;&#x3E;Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.&#x3C;/p&#x3E;
                &#x3C;small class=&#x22;text-muted&#x22;&#x3E;Donec id elit non mi porta.&#x3C;/small&#x3E;
            &#x3C;/a&#x3E;
            &#x3C;a href=&#x22;#&#x22; class=&#x22;list-group-item list-group-item-action flex-column align-items-start&#x22;&#x3E;
                &#x3C;div class=&#x22;d-flex w-100 justify-content-between&#x22;&#x3E;
                &#x3C;h5 class=&#x22;mb-1&#x22;&#x3E;List group item heading&#x3C;/h5&#x3E;
                &#x3C;small class=&#x22;text-muted&#x22;&#x3E;10d&#x3C;/small&#x3E;
                &#x3C;/div&#x3E;
                &#x3C;p class=&#x22;mb-1&#x22;&#x3E;Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.&#x3C;/p&#x3E;
                &#x3C;small class=&#x22;text-muted&#x22;&#x3E;Donec id elit non mi porta.&#x3C;/small&#x3E;
            &#x3C;/a&#x3E;
        &#x3C;/div&#x3E;
    &#x3C;/div&#x3E;
&#x3C;/div&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="recent-photos" class="my-5">
                            <h5 class="mb-3">Recent Photos / Instagram feed</h5>
                            <p>Use this collection of images to showcase your instagram or pinterest feed. Or just images.
                            </p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-7" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-13" data-toggle="tab" href="#tab-content-13" role="tab" aria-controls="tab-link-13" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-14" data-toggle="tab" href="#tab-content-14" role="tab" aria-controls="tab-link-14" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent7">
                                            <div class="tab-pane fade show active" id="tab-content-13" role="tabpanel" aria-labelledby="tab-content-13">
                                                <div class="row">
                                                    <div class="col-12 col-lg-4">
                                                        <div class="gallery-feed">
                                                            <a href="#"><img src="../../../../assets/img/gallery-feed/image-1.jpg" class="img animate-up-2" alt="gallery"></a>
                                                            <a href="#"><img src="../../../../assets/img/gallery-feed/image-2.jpg" class="img animate-up-2" alt="gallery"></a>
                                                            <a href="#"><img src="../../../../assets/img/gallery-feed/image-3.jpg" class="img animate-up-2" alt="gallery"></a>
                                                            <a href="#"><img src="../../../../assets/img/gallery-feed/image-4.jpg" class="img animate-up-2" alt="gallery"></a>
                                                            <a href="#"><img src="../../../../assets/img/gallery-feed/image-5.jpg" class="img animate-up-2" alt="gallery"></a>
                                                            <a href="#"><img src="../../../../assets/img/gallery-feed/image-6.jpg" class="img animate-up-2" alt="gallery"></a>
                                                            <a href="#"><img src="../../../../assets/img/gallery-feed/image-7.jpg" class="img animate-up-2" alt="gallery"></a>
                                                            <a href="#"><img src="../../../../assets/img/gallery-feed/image-8.jpg" class="img animate-up-2" alt="gallery"></a>
                                                            <a href="#"><img src="../../../../assets/img/gallery-feed/image-9.jpg" class="img animate-up-2" alt="gallery"></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-14" role="tabpanel" aria-labelledby="tab-content-14">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;div class=&#x22;row&#x22;&#x3E;
    &#x3C;div class=&#x22;col-12 col-lg-4&#x22;&#x3E;
        &#x3C;div class=&#x22;gallery-feed&#x22;&#x3E;
            &#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;img src=&#x22;../../../../assets/img/gallery-feed/image-1.jpg&#x22; class=&#x22;img animate-up-2&#x22; alt=&#x22;gallery&#x22;&#x3E;&#x3C;/a&#x3E;
            &#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;img src=&#x22;../../../../assets/img/gallery-feed/image-2.jpg&#x22; class=&#x22;img animate-up-2&#x22; alt=&#x22;gallery&#x22;&#x3E;&#x3C;/a&#x3E;
            &#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;img src=&#x22;../../../../assets/img/gallery-feed/image-3.jpg&#x22; class=&#x22;img animate-up-2&#x22; alt=&#x22;gallery&#x22;&#x3E;&#x3C;/a&#x3E;
            &#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;img src=&#x22;../../../../assets/img/gallery-feed/image-4.jpg&#x22; class=&#x22;img animate-up-2&#x22; alt=&#x22;gallery&#x22;&#x3E;&#x3C;/a&#x3E;
            &#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;img src=&#x22;../../../../assets/img/gallery-feed/image-5.jpg&#x22; class=&#x22;img animate-up-2&#x22; alt=&#x22;gallery&#x22;&#x3E;&#x3C;/a&#x3E;
            &#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;img src=&#x22;../../../../assets/img/gallery-feed/image-6.jpg&#x22; class=&#x22;img animate-up-2&#x22; alt=&#x22;gallery&#x22;&#x3E;&#x3C;/a&#x3E;
            &#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;img src=&#x22;../../../../assets/img/gallery-feed/image-7.jpg&#x22; class=&#x22;img animate-up-2&#x22; alt=&#x22;gallery&#x22;&#x3E;&#x3C;/a&#x3E;
            &#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;img src=&#x22;../../../../assets/img/gallery-feed/image-8.jpg&#x22; class=&#x22;img animate-up-2&#x22; alt=&#x22;gallery&#x22;&#x3E;&#x3C;/a&#x3E;
            &#x3C;a href=&#x22;#&#x22;&#x3E;&#x3C;img src=&#x22;../../../../assets/img/gallery-feed/image-9.jpg&#x22; class=&#x22;img animate-up-2&#x22; alt=&#x22;gallery&#x22;&#x3E;&#x3C;/a&#x3E;
        &#x3C;/div&#x3E;
    &#x3C;/div&#x3E;
&#x3C;/div&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="archives" class="my-5">
                            <h5 class="mb-3">Archives</h5>
                            <p>The following elements can be used to organize posts in archives.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-8" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-15" data-toggle="tab" href="#tab-content-15" role="tab" aria-controls="tab-link-15" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-16" data-toggle="tab" href="#tab-content-16" role="tab" aria-controls="tab-link-16" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent8">
                                            <div class="tab-pane fade show active" id="tab-content-15" role="tabpanel" aria-labelledby="tab-content-15">
                                                <div class="row">
                                                    <div class="col-12 col-lg-6">
                                                        <ul class="list-group list-group-flush bg-white shadow-sm border border-light">
                                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                                <a href="#">May 2019</a>50
                                                            </li>
                                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                                <a href="#">April 2019</a>78
                                                            </li>
                                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                                <a href="#">March 2019</a>34
                                                            </li>
                                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                                <a href="#">February 2019</a>37
                                                            </li>
                                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                                <a href="#">January 2019</a>80
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-16" role="tabpanel" aria-labelledby="tab-content-16">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;div class=&#x22;row&#x22;&#x3E;
    &#x3C;div class=&#x22;col-12 col-lg-6&#x22;&#x3E;
        &#x3C;ul class=&#x22;list-group list-group-flush bg-white shadow-sm&#x22;&#x3E;
            &#x3C;li class=&#x22;list-group-item d-flex justify-content-between align-items-center&#x22;&#x3E;
                &#x3C;a href=&#x22;#&#x22;&#x3E;May 2019&#x3C;/a&#x3E;50
            &#x3C;/li&#x3E;
            &#x3C;li class=&#x22;list-group-item d-flex justify-content-between align-items-center&#x22;&#x3E;
                &#x3C;a href=&#x22;#&#x22;&#x3E;April 2019&#x3C;/a&#x3E;78
            &#x3C;/li&#x3E;
            &#x3C;li class=&#x22;list-group-item d-flex justify-content-between align-items-center&#x22;&#x3E;
                &#x3C;a href=&#x22;#&#x22;&#x3E;March 2019&#x3C;/a&#x3E;34
            &#x3C;/li&#x3E;
            &#x3C;li class=&#x22;list-group-item d-flex justify-content-between align-items-center&#x22;&#x3E;
                &#x3C;a href=&#x22;#&#x22;&#x3E;February 2019&#x3C;/a&#x3E;37
            &#x3C;/li&#x3E;
            &#x3C;li class=&#x22;list-group-item d-flex justify-content-between align-items-center&#x22;&#x3E;
                &#x3C;a href=&#x22;#&#x22;&#x3E;January 2019&#x3C;/a&#x3E;80
            &#x3C;/li&#x3E;
        &#x3C;/ul&#x3E;
    &#x3C;/div&#x3E;
&#x3C;/div&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                        <div id="tags" class="my-5">
                            <h5 class="mb-3">Tags & search entries</h5>
                            <p>Use these items to indicate tags for blog posts or use team for search entries.</p>
                            <!-- Tab -->
                            <div class="my-5">
                                <!-- Tab Nav -->
                                <div class="nav-wrapper position-relative p-0">
                                    <ul class="nav nav-tabs flex-column flex-md-row" id="tab-9" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0 active" id="tab-link-17" data-toggle="tab" href="#tab-content-17" role="tab" aria-controls="tab-link-17" aria-selected="true">Result</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link mb-sm-3 mb-md-0" id="tab-link-18" data-toggle="tab" href="#tab-content-18" role="tab" aria-controls="tab-link-18" aria-selected="false">Html</a>
                                        </li>
                                        <span class="badge badge-md badge-primary copy-docs" data-toggle="tooltip" data-placement="top" title="Copy code">Copy</span>
                                    </ul>
                                </div>
                                <!-- End of Tab Nav -->
                                <div class="card">
                                    <div class="card-body px-0 pb-0">
                                        <div class="tab-content" id="tabcontent9">
                                            <div class="tab-pane fade show active" id="tab-content-17" role="tabpanel" aria-labelledby="tab-content-17">
                                                <div class="row">
                                                    <div class="col-12 col-lg-4">
                                                        <div class="wi-tags">
                                                            <a href="#">dark</a>
                                                            <a href="#">business</a>
                                                            <a href="#">corporate</a>
                                                            <a href="#">design</a>
                                                            <a href="#">portfolio</a>
                                                            <a href="#">responsive</a>
                                                            <a href="#">clean</a>
                                                            <a href="#">modern</a>
                                                            <a href="#">blog</a>
                                                            <a href="#">creative</a>
                                                            <a href="#">video</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab-pane fade" id="tab-content-18" role="tabpanel" aria-labelledby="tab-content-18">
                                                <div>
                                                    <pre>
                                                        <code class="language-html">
&#x3C;div class=&#x22;row&#x22;&#x3E;
    &#x3C;div class=&#x22;col-12 col-lg-4&#x22;&#x3E;
        &#x3C;div class=&#x22;wi-tags&#x22;&#x3E;
            &#x3C;a href=&#x22;#&#x22;&#x3E;dark&#x3C;/a&#x3E;
            &#x3C;a href=&#x22;#&#x22;&#x3E;business&#x3C;/a&#x3E;
            &#x3C;a href=&#x22;#&#x22;&#x3E;corporate&#x3C;/a&#x3E;
            &#x3C;a href=&#x22;#&#x22;&#x3E;design&#x3C;/a&#x3E;
            &#x3C;a href=&#x22;#&#x22;&#x3E;portfolio&#x3C;/a&#x3E;
            &#x3C;a href=&#x22;#&#x22;&#x3E;responsive&#x3C;/a&#x3E;
            &#x3C;a href=&#x22;#&#x22;&#x3E;clean&#x3C;/a&#x3E;
            &#x3C;a href=&#x22;#&#x22;&#x3E;modern&#x3C;/a&#x3E;
            &#x3C;a href=&#x22;#&#x22;&#x3E;blog&#x3C;/a&#x3E;
            &#x3C;a href=&#x22;#&#x22;&#x3E;creative&#x3C;/a&#x3E;
            &#x3C;a href=&#x22;#&#x22;&#x3E;video&#x3C;/a&#x3E;
        &#x3C;/div&#x3E;
    &#x3C;/div&#x3E;
&#x3C;/div&#x3E;
                                                        </code>
                                                    </pre>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- End of Tab -->
                        </div>
                    </div>
                    <div class="col-xl-2 col-lg-3 d-none d-lg-block py-md-1 doc-sidebar border-left">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <a href="#top-stories" class="nav-link" data-smooth-scroll>Top stories</a>
                            </li>
                            <li class="nav-item">
                                <a href="#recent-news" class="nav-link " data-smooth-scroll>Recent news</a>
                            </li>
                            <li class="nav-item">
                                <a href="#featured-news" class="nav-link " data-smooth-scroll>Featured news</a>
                            </li>
                            <li class="nav-item">
                                <a href="#recent-actions" class="nav-link " data-smooth-scroll>Recent actions</a>
                            </li>
                            <li class="nav-item">
                                <a href="#sidebar-menu" class="nav-link " data-smooth-scroll>Sidebar menu</a>
                            </li>
                            <li class="nav-item">
                                <a href="#updates" class="nav-link " data-smooth-scroll>Updates</a>
                            </li>
                            <li class="nav-item">
                                <a href="#recent-photos" class="nav-link " data-smooth-scroll>Recent photos / Instagram
                                    feed</a>
                            </li>
                            <li class="nav-item">
                                <a href="#archives" class="nav-link " data-smooth-scroll>Archives</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- End of content -->
            </div>
        </div>
    </section>
    @@include('./_scripts.html', {
        "path": "../.."
    })
</body>

</html>